<div class="modal" id="searchModal" role="dialog" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-md-down">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5 visually-hidden" id="searchModalLabel">{{ i18n "search_placeholder" }}</h2>
        <button type="button" class="btn-close visually-hidden" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="search-input flex-grow-1 d-none">
          <form id="search-form" class="search-form" action="#" method="post" accept-charset="UTF-8" role="search">
            <label for="query" class="visually-hidden">{{ i18n "search_title" }}</label>
            <div class="d-flex">
              <input type="search" id="query" name="query" class="search-text form-control form-control-lg" placeholder="{{ i18n "search_placeholder" }}" aria-label="{{ i18n "search_placeholder" }}" maxlength="128" autocomplete="off">
              <button type="button" class="btn btn-link text-decoration-none px-0 ms-3 d-md-none" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-body">
        <p class="search-loading status message d-none mt-3 text-center">{{ i18n "search_loading" }}</p>
        <p class="search-no-recent message d-none mt-3 text-center">{{ i18n "search_no_recent" }}</p>
        <p class="search-no-results message d-none mt-3 text-center">{{ i18n "search_no_results" }} for "<strong><span class="query-no-results">Query here</span></strong>"</p>
        <div id="searchResults" class="search-results"></div>
        <template>
          <article class="search-result list-view">
            <div class="card my-3">
              <div class="card-body">
                <header>
                  <h2 class="h5 title title-submitted mb-0"><a class="stretched-link text-decoration-none text-reset" href="#">Title here</a></h2>
                  <div class="submitted{{ if eq site.Params.doks.showDate false }} d-none{{ end }}"><time class="created-date">Date here</time></div>
                </header>
                <div class="content{{ if eq site.Params.doks.showSummary false }} d-none{{ end }}">Summary here</div>
              </div>
            </div>
          </article>
        </template>
      </div>
      <div class="modal-footer">
        <ul class="list-inline me-auto d-none d-md-block">
          <li class="list-inline-item"><kbd class="me-2"><svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path></g></svg></kbd><span class="DocSearch-Label">to select</span></li>
          <li class="list-inline-item"><kbd class="me-2"><svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path></g></svg></kbd><kbd class="me-2"><svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path></g></svg></kbd><span class="DocSearch-Label">to navigate</span></li>
          <li class="list-inline-item"><kbd class="me-2"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg></kbd><span class="DocSearch-Label">to close</span></li>
        </ul>
        <p class="d-md-none">Search by <a class="text-decoration-none" href="https://github.com/nextapps-de/flexsearch">FlexSearch</a></p>
      </div>
    </div>
  </div>
</div>
